<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jq/jQuery.js"></script>
	<style>
		@charset "UTF-8";
		* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: #f8f8f8;
            color: var(--text-color);
            line-height: 1.6;
        }
        .btn{
        	border:none;
        }
        /*用户卡片*/
        #container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
        }
        #user-card{
        	 background: linear-gradient(135deg, #fff 0%, #fff9f5 100%);
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }
        #user-card img{
        	width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-right: 20px;
            line-height: 80px;
        }
		.user_info{
			flex: 1;
			display: inline-block;
		}
		.user_nicl{
			font-size: 18px;
            font-weight: 600;
            margin-bottom: 5px;
            display: block;
            align-items: center;
		}
		.user_style{
			background-color: #CB62FF;
            color: white;
            font-size: 12px;
            padding: 2px 10px;
            border-radius: 10px;
            margin-left: 10px;
		}
		.user_meat{
			color: #000000;
            font-size: 14px;
            margin-bottom: 3px;
		}
		.bt{
			position: absolute;
			right: 50px;
			top:50px;
		}
		.bt button{
			padding: 8px 15px;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
			
		}
		.user_bt_edit{
			background-color: transparent;
            border: 1px solid;
            color: #CB62FF;
            margin-right: 10px;
            text-decoration: none;
            padding:10px 15px;
            font-size:13px;
            border-radius:8px;
		}
		.user_bt_member{
			background-color: #CB62FF;
            color: white;
            border: none;
		}
		.user_service {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .action-item {
            background-color: white;
            border-radius: 10px;
            padding: 15px 10px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s;
            cursor: pointer;
        }
        
        .action-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .action-icon {
            width: 40px;
            height: 40px;
            background-color: #fff5f0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            color:  #CB62FF;
            font-size: 18px;
        }
        
        .action-title {
            font-size: 14px;
            font-weight: 500;
        }
		
		/* 订单状态 */
        .order-status {
            background-color: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .section-title a {
            font-size: 14px;
            font-weight: normal;
            color: var(--light-text);
            text-decoration: none;
        }
        
        .status-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
        }
        
        .status-item {
            text-align: center;
            padding: 10px;
            cursor: pointer;
            border-radius: 8px;
            transition: background-color 0.3s;
        }
        
        .status-item:hover {
            background-color: #E6E6E6;
        }
        
        .status-count {
            font-size: 24px;
            font-weight: 600;
            color:  #000000;
            margin-bottom: 5px;
        }
        
        .status-label {
            font-size: 14px;
            color:  #85777B;
        }
         .recent-orders {
            background-color: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .order-list {
            margin-top: 15px;
        }
        
        .order-item {
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            transition: box-shadow 0.3s;
        }
        
        .order-item:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        .order-header {
            justify-content: space-between;
            padding-bottom: 10px;
            margin-bottom: 10px;
            border-bottom: 1px dashed #eee;
        }
        
        .order-id {
            font-weight: 500;
        }
        
        .order-date {
            color: #666;
            font-size: 14px;
            float:right;
        }
        
        .order-products {
            display: flex;
            margin-bottom: 10px;
        }
        
        .product-img {
        	dispaly:inline-block;
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
            margin-right: 20px;
            border: 1px solid #eee;
        }
        
        .order-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .order-total {
            font-weight: 600;
            color: #E30000;
        }
        
        .order-actions {
            display: flex;
            gap: 10px;
        }
        
        .btn-sm {
            padding: 6px 12px;
            font-size: 13px;
            cursor:pointer ;
        }
        .fontpye{
        	color: red;
        }
        .order-actions a{
        	display:inline-block;
        	font-size:13px;
        	text-decoration: none;
        	color:black;
        } 
        a{
        	color:black;
        	list-style: none;
        }
        #pageBar{
        	width:100%;
        	margin:10px auto;
        	margin-top:20px;
        	text-align: center;
        }
        #pageBar a{
        	margin:10px 10px;
        }
        #pageBar a:hover{
        	text-shadow: 0 2px 10px rgba(0, 0, 0, 1);
        	cursor: pointer;
        }
        #pageBar .activeColor{
        	color:#00A2E8;
        }
        #reviewText,#changeReviewText{
        	margin-left:20px;
        }
        a{
        	cursor: pointer;
        }
        .order-products a{
        	line-height:46px;
        	float:right;
        	display:inline-block;
        	width:100px;
        	text-align: center;
        	border:1px solid rgba(0,0,0,0.5)
        }
        .order-products img{
        	height:100px;/* 
        	transform: translate(50%,-50%); */
        }
        #avatar{
			height:100px;
			display:none;
			border-radius: 50%;
			vertical-align: middle;
		}
        .titleInfo{
        	text-align: right;
        	display:inline-block;
        	width:15%;
        	margin-right:3%;
        	margin-left:14%;
        	font-weight: 600;
        }
        .changeInfoInput{
        	width: 450px;
        	height: 30px;
        	display: inline-block;
        	border: 1px solid rgba(0, 0, 0, 0.2);
        	border-radius: 4px;
        	margin-top: 10px;
        	color: black;
        	padding: 5px;
        	padding-left: 25px;
        	font-size: 15px;
        	margin-bottom: 30px;
        }
        #inputBox{
        	margin:10px auto;
        }
        #changeInfoBtn{
        	margin:0px 50%;
        	transform: translate(-50%,-50%);
        	border:none;display:inline-block;
        	height:50px;
        	width:100px;
        	border-radius: 10%;
        	margin-top:50px;
        }
        #inputBox{
        	display:none;
        }
        #imageBox{
        	width:100px;
        	height:100px;
        }
         #imageBox img{
         	transform: translate(-50%,-50%);
         	margin:50%;
         }
	</style>
</head>
<body>
<%@ include file="header.jsp" %>
	<div id="container">
		<!-- 用户名片 -->
		<div id="user-card">
			<img src="${loginUser.headImg }" >
			<div class="user_info">
				<h2 class="user_nick">
					${loginUser.nickName }
				</h2>
				<p class="user_meat">账户：${loginUser.userName }</p>
				<div class="bt">
					<a class="user_bt_edit">编辑资料</a>
					<button class="user_bt_member" id="userLogout">退出登录</button>	
				</div>
			</div>
		</div>
	
		<!-- 用户业务 -->
			<div class="user_service">
            <div class="action-item" id="allUserOrders">
                <div class="action-icon">
                <img src="image/2.png" alt="">
                    <i class="fas fa-shopping-bag"></i>
                </div>
                <div class="action-title" >我的订单</div>
            </div>
            <div class="action-item">
                <div class="action-icon">
                <img src="image/3.png" alt="">
                    <i class="fas fa-heart"></i>
                </div>
                <div class="action-title">我的收藏</div>
            </div>
            <div class="action-item">
                <div class="action-icon">
                <img src="image/4.png" alt="">
                    <i class="fas fa-tag"></i>
                </div>
                <div class="action-title">优惠券</div>
            </div>
            <div class="action-item">
                <div class="action-icon">
                <img src="image/5.png" alt="">
                    <i class="fas fa-map-marker-alt"></i>
                </div>
                <div class="action-title">收货地址</div>
            </div>
            <div class="action-item" id="allUserReviews">
                <div class="action-icon">
                <img src="/lego/image/6.png" alt="">
                    <i class="fas fa-comment-alt"></i>
                </div>
                <div class="action-title">我的评价</div>
            </div>
        </div>
			

			<!-- 订单状态 -->
        <div class="order-status">
            <h3 class="section-title">
                我的订单
                <a href="orders.html">查看全部 <i class="fas fa-angle-right"></i></a>
            </h3>
            
            <div class="status-grid">
                <a class="status-item" id="pending">
                    <div class="status-label">待付款</div>
                </a>
                <a class="status-item" id="processing">
                    <div class="status-label">待发货</div>
                </a>
                <a class="status-item" id="delivered">
                    <div class="status-label">待收货</div>
                </a>
                <a class="status-item" id="toBeReviewed">
                    <div class="status-label">待评价</div>
                </a>
                <a class="status-item" id="finished">
                    <div class="status-label">已完成</div>
                </a>
            </div>
        </div>
		
		<!-- 订单 -->
		<div class="recent-orders">
            <h3 class="section-title">
                订单
            </h3>
            <div class="order-list" id="messageBox">
            <div id="inputBox">
            	<form action="/lego/changeInfo.do" method="POST" enctype="multipart/form-data" onsubmit="return validateForm()">
					<span class="titleInfo">账号:</span><input disabled type="text" name="username" id="username" class="changeInfoInput" value="${loginUser.userName }"><span id="nameSpan" class="remainText"></span>
					<br>
					<span class="titleInfo">请输入旧密码:</span><input type="text" name="oldpassword" class="changeInfoInput" id="oldPwd"> <span id="checkOldPwd" class="remainText"></span><br>
					<span class="titleInfo">请输入新密码:</span><input type="text" name="password" class="changeInfoInput" id="newPwd"> <span id="checkOnPwd" class="remainText"></span><br>
					<span class="titleInfo">请再次输入新密码:</span><input type="text" name="repassword" class="changeInfoInput" id="reNewPwd"><span id="checkTwicePwd" class="remainText"></span> <br>
					<span class="titleInfo">昵称:</span><input type="text" name="nickName" id="nikcName" value="${loginUser.nickName }" class="changeInfoInput"> <br>
					<span class="titleInfo">头像:</span><input type="file" name="headImg" accept="image/*" id="headImg"> 
					<!-- img用于预览 用户上传的图片 -->
					<img src=""  id="avatar" display="none"><br>
					<input type="submit" id="changeInfoBtn" value="修改">
				</form>
			</div>
			<div id="ordersBox">
				
			</div>
            </div>
            <div id="pageBar">
        		
        	</div>
        </div>
	</div>
	<%@ include file="footer.jsp" %>
</body>
<script>
	$("#userLogout").click(function(){
		window.location.href = "/lego/userLogOut.do";
	})
	$('.user_bt_edit').click(function(){
		$('#ordersBox').empty();
		$('#pageBar').empty();
		$('#inputBox').css({
			'display':'block'
		})
	});
	//验证昵称是否发生改变
	var nickNameHasChange = false;
	function nHaschanged(){
		 var $nikcName = $('#nikcName').val();
		    if($nikcName!=""&&$nikcName!="${loginUser.nickName}"){
		    	nickNameHasChange =  true
		    }else{
		    	nickNameHasChange = false;
		    }
	}
	$("#nikcName").blur(function()  {
		nHaschanged();
	});
	//密码是否正确
	var pwdHasChange = false;
	function pwdHaschanged(){
		 var $oldPwd = $('#oldPwd').val();
		    if($oldPwd=="${loginUser.password}"){
		    	pwdHasChange =  true;
		    }else{
		    	pwdHasChange = false;
		    }
	}
	$("#oldPwd").blur(function()  {
		pwdHaschanged();
	});
	//验证新密码和旧密码是否一致
	function checkONpwd(){
		var $oldpwd = $("#oldPwd").val();
		var $newpwd = $("#newPwd").val();
		if($oldpwd==$newpwd&&$oldpwd!=""){
			$('#checkOnPwd').css({
				'color': 'red',
				'font-size':'13px'
			})
			$('#checkOnPwd').text("新密码与旧密码重复！");
			return false;
		}
		return true;
	}
	//验证两次新密码是否相同
	function checkRePwd(){
		var $newpwd = $("#newPwd").val();
		var $repwd = $("#reNewPwd").val();
		if($newpwd==$repwd&&$newpwd!=""){
			$('#checkTwicePwd').text("✔️");
			$('#checkTwicePwd').css({
				'color': 'green',
				'font-size':'13px'
			})
			return true;
		}else{
			$('#checkTwicePwd').css({
				'color': 'red',
				'font-size':'13px'
			})
			$('#checkTwicePwd').text("两次新密码不一致或新密码为空");
			return false;
		}
	}
	$("#reNewPwd").blur(function()  {
	    console.log('输入框失去了焦点');
	    checkRePwd();
	});
	$("#newPwd").blur(function()  {
	    console.log('输入框失去了焦点');
	    checkRePwd();
	    checkONpwd();
	});
	//headImg是否发生改变
	var headImghasChange = false;
	//当 headImg发生改变时
	document.getElementById("headImg").addEventListener("change",function(event){
		if(document.getElementById("headImg").value !== ''){
			headImghasChange = true;
		}
		let file = event.target.files[0];
		console.log(file);
		if(file){
			let reader = new FileReader();
			reader.onload = function(e){
				document.getElementById("avatar").src=e.target.result;
				document.getElementById("avatar").style.display="inline";
			}
			reader.readAsDataURL(file);
		}
	});
	
	//表单提交
	function validateForm(){
		if((nickNameHasChange)||(checkRePwd()&&checkONpwd()&&pwdHasChange)||(headImghasChange)){
			return true;
		}
		return false;
	}
	//查询所有订单
	selectUserOrders("",1);
	var currentPage = 1;
	var currentorderStatus = "";
	function addPageBar(response){
		currentPage = response.pageNum;
		currentorderStatus = response.orderStatus;
		$('#pageBar').empty();
		if(response.hasPrev){
			var $prev = $('<a onclick=selectUserOrders("'+currentorderStatus+'",'+(currentPage-1)+')>上一页</a>');
    		$('#pageBar').append($prev);
		}
		for (var i = 0; i < response.navigatorNums.length; i++) {
			if(response.navigatorNums[i]==currentPage){
				var $num = $('<a onclick=selectUserOrders("'+currentorderStatus+'",'+response.navigatorNums[i]+') class="activeColor">'+response.navigatorNums[i]+'</a>');
        		$('#pageBar').append($num);
			}else{
				var $num = $('<a onclick=selectUserOrders("'+currentorderStatus+'",'+response.navigatorNums[i]+')>'+response.navigatorNums[i]+'</a>');
        		$('#pageBar').append($num);
			}
		}
		if(response.hasNext){
			var $next = $('<a onclick=selectUserOrders("'+currentorderStatus+'",'+(currentPage+1)+')>下一页</a>');
    		$('#pageBar').append($next);
		}
	}
	
	
	
	function selectUserOrders(orderStatus,pageNum){
		$('.section-title').text('订单');
		$.ajax({
    	    url: '/lego/selectUserOrders.do',
    	    type: 'POST',
    	    data: {
    	    	orderStatus:orderStatus,
    	    	userId:${loginUser.userId},
    	    	pageNum:pageNum
	        },
    	    success: function(response) {
    	    	var order = response.orders;
    	    	$("#ordersBox").empty();
    	    	$("#inputBox").css({
    	    		'display':'none'
    	    	})
    	    	if(order.length<=0){
    	    		var $oiDiv = $('<div class="order-item">无</div>');
    	    		$("#ordersBox").append($oiDiv);
    	    	}
    	    	for (var i = 0; i < order.length; i++) {
    	    		var $oiDiv = $('<div class="order-item"></div>');
        	    	var $ohDiv = $('<div class="order-header"><div>');
        	    	var $oiSpan = $('<span class="order-id">订单号: '+order[i].orderNumber+'</span>');
        	    	var $odSpan = $('<span class="order-date">'+order[i].orderTime+'</span>');
        	    	var $opDiv = $('<div class="order-products"></div>');
        	    	var $ofDiv = $('<div class="order-footer"></div>');
        	    	var $otDiv = $('<div class="order-total">实付: ¥'+order[i].totalAmount+'</div>');
        	    	var $oaDiv = $('<div class="order-actions"></div>');
        	    	if(order[i].orderStatus=="pending"){
        	    		var url = encodeURIComponent(order[i].orderNumber);
        	    		var $a = $('<a href="/lego/payment.do?goodsId='+order[i].goodsId+'&totalQuantity='+order[i].totalQuantity+'&orderNumber='+url+'">去支付</a>');
        	    		$oaDiv.append($a);
        	    	}else if(order[i].orderStatus=="processing"){
        	    		var $a = $('<a href="#">等待发货</a>');
        	    		$oaDiv.append($a);
        	    	}else if(order[i].orderStatus=="shipped"){
        	    		var $a = $('<a href="#">正在送货中</a>');
        	    		$oaDiv.append($a);
        	    	}else if(order[i].orderStatus=="delivered"){
        	    		var url = encodeURIComponent(order[i].orderNumber);
        	    		var $a = $('<a href="/lego/changeStatus.do?orderStatus=toBeReviewed&orderNumber='+url+'">确认签收</a>');
        	    		$oaDiv.append($a);
        	    	}else if(order[i].orderStatus=="toBeReviewed"){
        	    		var $textAre = $('<textarea id="changeReviewText" class="changeReviewText" rows="3" cols="140" placeholder="请输入评论，字符6-144" changeText('+order[i].orderId+')></textarea>');
        	    		var $a = $('<a onclick="changeText('+order[i].orderId+',this)">保存</a>');
        	    		$opDiv.append($textAre);
        	    		$oaDiv.append($a);
        	    	}else if(order[i].orderStatus=="finished"){
        	    		var $a = $('<a href="#">已完成</a>');
        	    		$oaDiv.append($a);
        	    	}
        	    	$ofDiv.append($otDiv);
        	    	$ofDiv.append($oaDiv);
        	    	$ohDiv.append($oiSpan);
        	    	$ohDiv.append($odSpan);
        	    	$ofDiv.append($oaDiv);
        	    	$oiDiv.append($ohDiv);
        	    	$oiDiv.append($opDiv);
        	    	$oiDiv.append($ofDiv);
        	    	$("#ordersBox").append($oiDiv);
				}
    	    	addPageBar(response);
    	    },
    	   error: function(xhr, status, error) {
    	        console.error("AJAX请求失败:");
    	        console.log("状态码:", xhr.status);
    	        console.log("错误:", error);
    	        console.log("响应:", xhr.responseText);
    	        if(xhr.status === 404) {
    	            alert("接口不存在，请检查URL路径");
    	        }
    	    }
    	});
	}
	$("#allUserOrders").click(function(){
		selectUserOrders("",1);
	});
	$("#pending").click(function(){
		selectUserOrders("pending",1);
	});
	$("#processing").click(function(){
		selectUserOrders("processing",1);
	});
	$("#shipped").click(function(){
		selectUserOrders("shipped",1);
	});
	$("#delivered").click(function(){
		selectUserOrders("delivered",1);
	});
	$("#toBeReviewed").click(function(){
		selectUserOrders("toBeReviewed",1);
	});
	$("#finished").click(function(){
		selectUserOrders("finished",1);
	});
	
	var currentoPage = 1;
	function addtoPageBar(response){
		currentPage = response.pageNum;
		$('#pageBar').empty();
		if(response.hasPrev){
			var $prev = $('<a onclick=selectUserOrders('+(currentoPage-1)+')>上一页</a>');
    		$('#pageBar').append($prev);
		}
		for (var i = 0; i < response.navigatorNums.length; i++) {
			if(response.navigatorNums[i]==currentPage){
				var $num = $('<a onclick=selectAllUserReviews('+response.navigatorNums[i]+') class="activeColor">'+response.navigatorNums[i]+'</a>');
        		$('#pageBar').append($num);
			}else{
				var $num = $('<a onclick=selectAllUserReviews('+response.navigatorNums[i]+')>'+response.navigatorNums[i]+'</a>');
        		$('#pageBar').append($num);
			}
		}
		if(response.hasNext){
			var $next = $('<a onclick=selectUserOrders('+(currentoPage+1)+')>下一页</a>');
    		$('#pageBar').append($next);
		}
	}
	
	function selectAllUserReviews(pageNum){
		$('.section-title').text('评论');
		$.ajax({
    	    url: '/lego/selcetUserReviews.do',
    	    type: 'POST',
    	    data: {
    	    	userId:${loginUser.userId} ,
    	    	pageNum:pageNum,
    	    	pageSize:2
	        },
    	    success: function(response){
    	    	var order = response.ordersAndGoodsImgVO;
    	    	$("#ordersBox").empty();
    	    	$("#inputBox").css({
    	    		'display':'none'
    	    	});
    	    	if(order.length<=0){
    	    		var $oiDiv = $('<div class="order-item">无</div>');
    	    		$("#ordersBox").append($oiDiv);
    	    	}
    	    	for (var i = 0; i < order.length; i++) {
    	    		var $oiDiv = $('<div class="order-item"></div>');
        	    	var $ohDiv = $('<div class="order-header"><div>');
        	    	var $oiSpan = $('<span class="order-id">订单号: '+order[i].orderNumber+'</span>');
        	    	var $odSpan = $('<span class="order-date">'+order[i].orderTime+'</span>');
        	    	var $opDiv = $('<div class="order-products"></div>');
        	    	var $imgBox = $('<div id="imageBox"></div>')
        	    	var $img = $('<img src="'+order[i].goodsImg+'">');
        	    	var $ofDiv = $('<div class="order-footer"></div>');
        	    	var $otDiv = $('<div class="order-total">实付: ¥'+order[i].totalAmount+'</div>');
        	    	var $oaDiv = $('<div class="order-actions"></div>');
        	    	var $textSpan = $('<span id="reviewText" class="changeReviewText">'+order[i].reviewContext+'</span>');
        	    	var $changeBtn = $('<a id="changeBtna" onclick="changeText('+order[i].orderId+',this)">修改</a>');
        	    	$ofDiv.append($otDiv);
        	    	$ofDiv.append($oaDiv);
        	    	$ohDiv.append($oiSpan);
        	    	$ohDiv.append($odSpan);
        	    	$ofDiv.append($oaDiv);
        	    	$oiDiv.append($ohDiv);
        	    	$oiDiv.append($opDiv);
        	    	$oiDiv.append($ofDiv);
        	    	$opDiv.append($imgBox);
        	    	$opDiv.append($textSpan);
        	    	$oaDiv.append($changeBtn);
        	    	$imgBox.append($img);
        	    	$("#ordersBox").append($oiDiv);
    	    	}
    	    	addtoPageBar(response);
    	    }
		});
	}
	$("#allUserReviews").click(function(){
		selectAllUserReviews(1);
	});
	
	function sendReview(orderId,text){
		$.ajax({
    	    url: '/lego/sendReview.do',
    	    type: 'POST',
    	    data: {
    	    	orderId:orderId,
    	    	rewContext:text
	        },
    	    success: function(response){
    	    	console.log("修改成功");
    	    }
		})
	}
	
	function changeText(orderId,e){
		if($(e).text()=="修改"){
			var $textarea = $(e).closest('.order-footer').siblings('.order-products').find('.changeReviewText');
			var text = $textarea.text();
			$textarea.replaceWith('<textarea id="changeReviewText" class="changeReviewText" rows="3" cols="140" placeholder="请输入评论，字符6-144" changeText('+orderId+')>'+text+'</textarea>');
			$(e).text("保存");
		}else{
			var $textarea = $(e).closest('.order-footer').siblings('.order-products').find('.changeReviewText');
			var text = $textarea.val();
			if(text.length<6||text.length>100){
				alert("字符长度应该在6-100之间");
			}else{
				sendReview(orderId,text);
				$textarea.replaceWith('<span id="reviewText" class="changeReviewText">'+text+'</span>');
				$(e).text("修改");
			}
		}
	}
</script>
</html>